<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { TypePageDTO } from '@src/interfaces/TypePageDTO.ts'
import { TypeClassInfo } from '@src/interfaces/TypeClassInfo.ts'
import Template from '@src/Template.vue'
import { EnumClassStatus } from '@src/enums/EnumClassStatus.ts'
import { getClassListApi, joinClassApi } from '@src/apis/classApi.ts'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { router } from '@util/RouterUtil.ts'
import TokenUtil from '@util/TokenUtil.ts'
import useUserStore from '@src/stores/useUserStore.ts'
import Pagination from '@src/components/Pagination.vue'

const route = useRoute()

const page = ref<TypePageDTO<TypeClassInfo>>({
  current: 1,
  size: 10,
  total: 0,
  records: [],
})
const search = ref({
  name: '',
  ids: '',
})

const getClassList = () => {
  getClassListApi({
    page: page.value.current,
    pageSize: page.value.size,
    ...search.value,
  }).then(({ data }) => {
    page.value = data
  })
}

const handleCurrentChange = (value: number) => {
  page.value.current = value
  getClassList()
}
const handleSizeChange = (value: number) => {
  page.value.size = value
  getClassList()
}

const getParamsFormSearchUrl = () => {
  const classId = route?.query?.classId as string | undefined
  search.value.ids = classId || ''
}

/**
 * 加入班级
 */
const joinClass = (classInfo: TypeClassInfo) => {
  joinClassApi(<number>classInfo.id).then(() => {
    ElMessage.success('加入成功')
    router.push('/class/info')
  })
}

/**
 * 跳转班级信息页面
 */
const toClassInfo = () => {
  router.push('/class/info')
}

onMounted(() => {
  TokenUtil.refresh().then(() => {
    if (useUserStore().userInfo.classId) {
      ElMessage.warning('您已加入班级，无需再次加入！')
      toClassInfo()
      return
    }

    getParamsFormSearchUrl()
    getClassList()
  })
})

watch(search, getClassList, { deep: true })
</script>

<template>
  <div>
    <h2><el-text>加入班级</el-text></h2>
    <div class="input-box">
      <el-input v-model="search.name" placeholder="输入班级名称"></el-input>
      <el-input
        v-model.trim="search.ids"
        placeholder="输入班级ID(有多个时逗号分割)"
      ></el-input>
      <el-button type="primary">搜索</el-button>
    </div>
    <div class="table-box">
      <el-table :data="page?.records" height="720">
        <el-table-column prop="id" label="班级ID"></el-table-column>
        <el-table-column prop="name" label="班级名称"></el-table-column>
        <el-table-column prop="size" label="班级人数"></el-table-column>
        <el-table-column prop="status" label="班级状态">
          <template #default="scope">
            <div v-if="scope.row.status === EnumClassStatus.DISABLE">
              <el-text type="danger">{{ scope.row.status }}</el-text>
            </div>
            <div v-else>
              <el-text type="success">{{ scope.row.status }}</el-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100">
          <template #default="scope">
            <div v-show="scope.row.status === EnumClassStatus.ENABLE">
              <el-popconfirm
                @confirm="joinClass(scope.row)"
                :title="`确定加入 ${scope.row.name} 吗？`"
              >
                <template #reference>
                  <el-button type="success">加入</el-button>
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <Pagination
        :page="page.current"
        :size="page.size"
        :total="page.total"
        @page-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<style scoped lang="less">
h2 {
  text-align: center;
  .el-text {
    font-size: 2em;
  }
}

.input-box {
  display: flex;

  & > * {
    margin: 0 10px;
  }
}
</style>
